/**
 * tabs
 * 结构:
 * <div id=''>
 * 		<div class="tabs-nav">
 * 			<span class="music-tab-hover">tab1</span><span>tab2</span>
 * 		</div>
 *     <ul class="tabs-nav">
 *     		<li class="current">...</li><li>...</li>
 *     </ul>
 * 		<div class="tabs-tab"></div>
 * 		<div class="tabs-tab"></div>
 * 		...
 * </div>
 *  <ul class="item_menu" id="youtube_menu">
        <li class="curr"><a href="#">Today</a></li>
        <li><a href="#">Week</a></li>
        <li><a href="#">Month</a></li>
        <li><a href="#">All Time</a></li>
        </ul>
    </ul>    
 * @param
 * options = {
 * 		hoverClass: 'music-tab-hover',
 *      onswitch: function($nav, $tab, $this){}
 * }
 * @author  hewc
 */
(function($){
	$.fn.tabs = function(options){
		//default setting
		options = $.extend({
			hoverClass: 'music-tab-hover'
		}, options);
		
		return this.each(function(){
			var $this = $(this);
			var $navs = $this.children("div.tabs-nav").children("span");
			if($navs.length == 0){
				$navs = $this.children("ul.tabs-nav").children("li");
			}
			var $tabs = $this.children("div.tabs-tab");
			var current = 0;
			$navs.click(function(){
				var $nav = $(this);
				var index = $nav.index();
				if(index != current){
					current = index;
					$navs.removeClass(options.hoverClass).eq(index).addClass(options.hoverClass);								
					var $tab = $tabs.eq(index);
					$tabs.hide();
					$tab.show();
					if(options.onswitch){
						options.onswitch($nav, $tab, $this);
					}
				}				
			});
		});		
	};
})(jQuery);